<template>
	<view class="container">
		<custom-status-bar></custom-status-bar>
		<!-- 顶部导航 -->
		<view class="header">
			<view class="back-icon" @click="goBack">
				<uni-icons type="left" size="20" color="#1890ff"></uni-icons>
				<text>返回</text>
			</view>
			<text class="title">安全中心</text>
		</view>
		<!-- 蓝色横条 -->
		<view class="blue-bar"></view>
		<!-- 功能列表 -->
		<view class="card">
			<view class="item" @click="open">
				<text>修改密码</text>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
			<view class="item" @click="logoffAccount">
				<text>注销账号</text>
				<uni-icons type="right" size="16" color="#999"></uni-icons>
			</view>
		</view>
		<!-- 退出登录按钮 -->
		<button class="logout-btn" @click="logoutFn">退出登录</button>
		<!-- 修改密码 -->
		<uni-popup ref="popup" type="bottom">
			<view class="modify-password-popup">
				<!-- 关闭按钮 -->
				<uni-icons type="closeempty" color="#999999" size="20" class="close-btn" @click="close"></uni-icons>
				<!-- 标题 -->
				<text class="title">修改密码</text>
				<!-- 表单内容 -->
				<view class="form-container">
					<!-- 旧密码输入 -->
					<view class="input-item password-section">
						<text>旧密码</text>
						<input v-model="oldPassword" :type="showOldPassword ? 'text' : 'password'"
							placeholder="旧密码(密码必须为字母开头)" class="input-field" @input="validateOldPassword" />
						<uni-icons :type="showOldPassword ? 'eye' : 'eye-slash'" size="20" color="#999"
							@click="showOldPassword = !showOldPassword" />
					</view>
					<!-- 新密码输入 -->
					<view class="input-item password-section">
						<text>新密码</text>
						<input v-model="newPassword" :type="showNewPassword ? 'text' : 'password'"
							placeholder="新密码(密码必须为字母开头)" class="input-field" @input="validateNewPassword" />
						<uni-icons :type="showNewPassword ? 'eye' : 'eye-slash'" size="20" color="#999"
							@click="showNewPassword = !showNewPassword" />
					</view>
					<!-- 验证提示 -->
					<text v-if="error" class="error">{{ error }}</text>
					<!-- 注册按钮 -->
					<view class="submit-btn" :disabled="!modifyValid" @click="handleSubmit"> <text>提交</text></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue';
	import CustomStatusBar from '../../components/common/CustomStatusBar.vue';
	import {
		destroyAccount,
		logout
	} from "@/api/index.js"
	const popup = ref();
	const oldPassword = ref('');
	const newPassword = ref('');
	const showOldPassword = ref(false);
	const showNewPassword = ref(false);
	const error = ref('');
	const isValid = ref(false);
	// 注销账号
	const logoffAccount = () => {
		uni.showModal({
			title: '注销账号',
			content: '注销后无法恢复，确认要继续吗？',
			success: async (response) => {
				if (response.confirm) {
					// 调用注销接口
					const res = await destroyAccount(uni.getStorageSync('coffee_token'))
					console.log("注销", res)
					if (res.code === "G001") {
						uni.showToast({
							title: res.msg,
							icon: 'success'
						})
						// 删除本地保存的token
						uni.removeStorageSync('coffee_token')
						// 发送全局事件通知首页更新状态
						uni.$emit('logoutSuccess')
						//注销之后再回到首页
						uni.switchTab({
							url: '/pages/index/index'
						})
					}
				}
			}
		});
	};
	// 退出登录
	const logoutFn = () => {
		uni.showModal({
			title: '确认退出登录吗？',
			// content: '注销后无法恢复，确认要继续吗？',
			success: async (response) => {
				if (response.confirm) {
					uni.showLoading({
						title: '退出中...'
					});
					// 调用退出接口
					const res = await logout(uni.getStorageSync('coffee_token'))
					console.log("退出登录", res)
					if (res.code === "F001") {
						console.log("res.msg:", res.msg)
						uni.showToast({
							title: res.msg,
							icon: 'success'
						})
					}
				}
			},
			complete: () => {
				// 删除本地保存的token
				uni.removeStorageSync('coffee_token')
				// 删除本地保存的用户信息	 
				uni.removeStorageSync('userInfo')
				uni.removeStorageSync('product')
				uni.hideLoading()
				// 发送全局事件通知首页更新状态
				uni.$emit('logoutSuccess')
				//注销之后再回到首页
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		});
	};
	const navigateTo = (path) => {
		uni.navigateTo({
			url: `/pages/security/${path}`
		});
	};
	const goBack = () => {
		const pages = getCurrentPages();
		if (pages.length > 1) uni.navigateBack();
			else  uni.switchTab({ url: '/pages/index/index' });
	}
	const validateOldPassword = () => {
		const regex = /^[A-Za-z].+/;
		if (regex.test(oldPassword.value)) {
			error.value = '';
			checkFormValidity();
		} else {
			error.value = '旧密码必须以字母开头';
		}
	};
	const validateNewPassword = () => {
		const regex = /^[A-Za-z].+/;
		if (regex.test(newPassword.value)) {
			error.value = '';
			checkFormValidity();
		} else {
			error.value = '新密码必须以字母开头';
		}
	};
	const resetInput = () => {
		oldPassword.value = ''
		oldPassword.value = ''
		showOldPassword.value = false
		showNewPassword.value = false
	}
	const open = () => {
		resetInput()
		popup.value.open();
	}
	const close = () => {
		popup.value.close();
	}
	const checkFormValidity = () => {
		isValid.value = oldPassword.value && newPassword.value && !error.value;
	};
	const toggleOldPassword = () => {
		showOldPassword.value = !showOldPassword.value;
	};
	const toggleNewPassword = () => {
		showNewPassword.value = !showNewPassword.value;
	};
	const handleSubmit = async () => {
		if (!isValid.value) return;
		uni.showToast({
			title: '接口关闭了',
			icon: 'fail'
		});
		closeModify();
	};
</script>
<style scoped>
	.container {
		padding: 0 20rpx 150rpx 20rpx;
	}

	.header {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		border-bottom: 1rpx solid #eee;
	}

	.back-icon {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		font-size: 28rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.back-text {
		margin-left: 10rpx;
		color: #232773;
	}

	.blue-bar {
		height: 80rpx;
		background: #232773;
		margin-top: 20rpx;
	}

	.card {
		background: white;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-top: 20rpx;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 80rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.item:last-child {
		border-bottom: none;
	}

	.logout-btn {
		background-color: #232773;
		margin-top: 80rpx;
		color: white;
		border-radius: 40rpx;
		font-size: 32rpx;
		padding: 20rpx 0;
		line-height: 1.5;
	}

	.modify-password-popup {
		background-color: #ffffff;
		padding: 40rpx;
	}

	.modify-password-popup .close-btn {
		float: right;
		font-size: 30rpx;
		cursor: pointer;
		margin-bottom: 20rpx;
	}

	.modify-password-popup .title {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 40rpx;
	}

	.modify-password-popup .form-container {
		margin-top: 40rpx;
	}

	.input-item {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		border-bottom: 2rpx solid #eee;
	}

	.input-field {
		flex: 1;
		margin-left: 20rpx;
		padding: 20rpx 0;
	}

	.error {
		color: red;
		font-size: 24rpx;
		margin-top: 10rpx;
		margin-bottom: 40rpx;
	}

	.submit-btn {
		display: block;
		text-align: center;
		background-color: #232773;
		border: 1rpx solid #232773;
		color: white;
		border-radius: 40rpx;
		padding: 20rpx 0;
		font-size: 32rpx;
		margin-top: 50rpx;
	}
</style>